<template>
	<view class="details">
		<view class="top">
			<image class="top_img" :src="decodeURIComponent(img).substring(7)"></image>
			<view class="title">{{title}}</view>
			<view class="author">
				{{author}}
			</view>
			<view class="mini_detals">
				<view>{{score}}</view>
				<view>{{minorCate}}</view>
				<view>{{wordCount}}</view>
			</view>
		</view>
		<view class="centre">
			<view class="longIntro" :class="unfold?'longIntro_max':''">
				{{longIntro}}
			</view>
			<view class="unfold" :class="unfold?'shrink':''" @click="unfold=!unfold">
				<u-icon name="arrow-down" color="#2da79b" size="30"></u-icon>
			</view>
		</view>
		<view class="catalog">
			<view class="cut_off_rule"></view>
			<view class="last_chapter">
				<view>目录</view>
				<view>{{lastChapter}}</view>
			</view>
			<view>
				<u-button :custom-style="{
					backgroundColor: '#F8F8F8',
					border: 0,
					color: '#2da79b',
					fontSize:'26rpx'
				}" :ripple="true" :hair-line="false" ripple-bg-color="#2da79b" @click="lookCondition">查看目录</u-button>
			</view>
		</view>
		<view class="bottom">
			<view>缓存</view>
			<view>加书架</view>
			<view>立即阅读</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				unfold:false,
				title: '',
				author: '',
				img: '',
				minorCate: '',
				score: '',
				wordCount: '',
				longIntro: '',
				lastChapter:'',
			}
		},
		onLoad({
			data
		}) {
			const params = Object.keys(data).length > 0 ? JSON.parse(data) : {}
			this.getInfo(params._id)
		},
		methods: {
			//查看章节
			lookCondition(){
				uni.navigateTo({
					url:"../lookCondition/lookCondition?id="+this.id+"&title="+this.title
				})
			},
			//获取小说信息
			getInfo(id) {
				this.$request({
					url: '/book/' + id,
					dataType: 'json',
					sslVerify: false,
					method: 'GET',
				}).then(res => {
					let data = res[1].data
					console.log(data)
					this.title = data.title
					this.author = data.author
					this.img = data.cover
					this.minorCate = data.minorCate
					this.score = data.rating.score + '分'
					this.wordCount = (data.wordCount / 10000).toFixed(1) + '万字'
					this.longIntro = data.longIntro
					this.lastChapter=data.lastChapter
					this.id=data._id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		.top {
			position: relative;
			width: 100%;
			padding-left: 270rpx;
			padding-top: 20rpx;
			height: 220rpx;
			background-color: #353838;
			color: #fff;
			box-sizing: border-box;

			.top_img {
				position: absolute;
				width: 190rpx;
				height: 250rpx;
				left: 40rpx;
				top: 20rpx;
			}

			.title {
				font-size: 30rpx;
			}

			.author {
				margin-top: 20rpx;
				font-size: 24rpx;
			}

			.mini_detals {
				display: flex;
				margin-top: 20rpx;

				view {
					padding: 6rpx 10rpx;
					border: 1px solid #a09c9c;
					font-size: 20rpx;
					margin-right: 10rpx;
					color: #a09c9c;
				}

				view:first-child {
					border-color: #F0AD4E;
					color: #F0AD4E;
				}
			}
		}

		.centre {
			position: relative;
			.longIntro{
				padding: 120rpx 40rpx 0 40rpx;
				line-height: 60rpx;
				height: max-content;
				overflow: hidden;
				letter-spacing: 2rpx;
				max-height: 360rpx;
				transition: max-height .5s;
			}
			.longIntro_max{
				max-height: 800rpx;
			}
			.unfold {
				position: absolute;
				right: 40rpx;
				bottom: 0rpx;
				padding:10rpx;
				background-color: #fff;
				background: linear-gradient(to right, rgba(255,255,255,0.9), #fff);
				box-shadow: 0px 0px 0px 20px rgba(255,255,255,0.5);
				transition: transform .5s;
			}
			.shrink{
				transform: rotate(180deg);
			}
		}

		.bottom {
			height: 80rpx;
			width: 100%;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			display: flex;

			view {
				flex: 1;
				text-align: center;
				color: #fff;
				line-height: 80rpx;
				color: #2da79b;
				box-shadow: 0 0 6rpx 0 #ddd;
				box-sizing: border-box;
			}

			view:last-child {
				flex: 3;
				background-color: #2da79b;
				color: #fff;
			}

			view:first-child {
				border-right: 2rpx solid #ddd;
			}
		}
		.catalog{
			padding: 40rpx 40rpx;
			.last_chapter{
				line-height: 60rpx;
				padding: 20rpx 0;
				font-size: 24rpx;
				display: flex;
					&>:last-child{
						flex: 1;
						text-align: right;
					}
			}
		}
		.cut_off_rule{
			border: 1rpx solid #ccc;
		}
	}
</style>
